<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>YAML | Example &quot;styled_microformats&quot;</title>
<!-- (en) Add your meta data here -->
<!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
<link href="css/layout_microformats.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="css/patches/patch_microformats.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<!-- skip link navigation -->
<ul id="skiplinks">
  <li><a class="skip" href="#nav">Skip to navigation (Press Enter).</a></li>
  <li><a class="skip" href="#col3">Skip to main content (Press Enter).</a></li>
</ul>

<div class="page_margins">
  <div class="page">
    <div id="header" role="banner">
      <div id="topnav" role="contentinfo"> <span><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a></span> </div>
      <h1>Example | Beispiel <em>&laquo;styled_microformats&raquo;</em></h1>
      <span>YAML &#8226; (X)HTML/CSS Framework</span> </div>
    <!-- begin: main navigation #nav -->
    <div id="nav" role="navigation">
      <div class="hlist">
        <ul>
          <li><a href="../index.html">Table Of Contents</a></li>
          <li><a href="rtl_support.html">Previous Example</a></li>
        </ul>
      </div>
    </div>
    <!-- end: main navigation -->
    <!-- begin: main content area #main -->
    <div id="main">
      <!-- begin: #col1 - first float column -->
      <div id="col1" role="complementary">
        <div id="col1_content" class="clearfix">
          <div class="info">
            <h2>About this example</h2>
            <p>YAML support for <em>Mircoformats</em>  is provided as an  add-on to   the framework, see: <a href="http://www.yaml.de/en/documentation/tools-tips/add-ons.html">Section 5.4:Add-ons</a>.</p>
            <p>Microformats are small bits of HTML that represent things like people, events, tags, etc. in web pages. </p>
            <p>Microformats enable the publishing of higher fidelity  information on the Web, providing the fastest and simplest way to  support feeds and APIs for your website. See more explanations of <a href="http://microformats.org/wiki/what-are-microformats" title="what-are-microformats">what microformats are</a> and <a href="http://microformats.org/wiki/what-can-you-do-with-microformats" title="what-can-you-do-with-microformats">what you can do with them</a>. </p>
            <cite>Read more on <a href="http://microformats.org">microformats.org.</a></cite> </div>
          <hr />
          <div class="info">
            <h3>Microformats Generators</h3>
            <h4>hCard</h4>
            <ul>
              <li><a href="http://microformats.org/code/hcard/creator">hCard creator</a></li>
            </ul>
            <h4>hCalendar</h4>
            <ul>
              <li><a href="http://microformats.org/code/hcalendar/creator">hCalendar creator</a></li>
            </ul>
            <h4>hReview</h4>
            <ul>
              <li><a href="http://microformats.org/code/hreview/creator">hReview creator</a></li>
            </ul>
            <h4>XFN</h4>
            <ul>
              <li><a href="http://gmpg.org/xfn/creator">XFN creator</a></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- end: #col1 -->
      <!-- begin: #col3 static column -->
      <div id="col3" role="main">
        <div id="col3_content" class="clearfix">
          <h2>Most Common Microformats</h2>
          <h3>Contact examples (hCard)</h3>
          <div class="vcard"> <a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
            <div class="adr"> <span class="type">Work</span>:
              <div class="street-address">169 University Avenue</div>
              <span class="locality">Palo Alto</span>, <abbr class="region" title="California">CA</abbr> <span class="postal-code">94301</span>
              <div class="country-name">USA</div>
            </div>
            <div class="tel"> <span class="type">Tel (work):</span> +1-650-289-4040 </div>
            <div class="tel"> <span class="type">Fax:</span> +1-650-289-4041 </div>
            <div>Email: <span class="email">info@commerce.net</span> </div>
          </div>
          <h3>Event examples (hCalendar)</h3>
          <div class="vevent"> <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a> <span class="summary">Web 2.0 Conference</span> <abbr class="dtstart" title="2007-10-05">October 5</abbr>- <abbr class="dtend" title="2007-10-20">19</abbr>,
            at the <span class="location">Argent Hotel, San Francisco, CA</span> </div>
          <div class="vevent">
            <h3 class="summary">XYZ Project Review</h3>
            <p class="description">Project XYZ Review Meeting</p>
            <p>To be held on <abbr class="dtstart" title="1998-03-12T08:30:00-05:00">12 March 1998 from 8:30am EST</abbr> until <abbr class="dtend" title="1998-03-12T09:30:00-05:00">9:30am EST</abbr></p>
            <p>Location: <span class="location">1CP Conference Room 4350</span></p>
            <small>Booked by: <span class="uid">guid-1.host1.com</span> on <abbr class="dtstamp" title="19980309T231000Z">9 Mar 1998 6:00pm</abbr></small> </div>
          <h3>rel-tag</h3>
          <!-- Vielleicht besser div statt p, aber dann müsstest du das Styling noch ein wenig anpassen (Abstände). -->
          <p class="tags"><span lang="en" xml:lang="en">Tags</span>: <a href="http://www.mister-wong.de/tags/best-practise/" rel="tag">Best Practice</a>, <a href="http://www.mister-wong.de/tags/webdesign/" rel="tag">Webstandards</a></p>
          <h3>XFN</h3>
          <ul>
            <li><a href="http://www.metafilter.com/" class="xfnRelationship" rel="me">Me</a></li>
            <li><a href="http://jane-blog.example.org/" class="xfnRelationship" rel="sweetheart date met">Jane</a></li>
            <li><a href="http://dave-blog.example.org/" class="xfnRelationship" rel="friend met">Dave</a></li>
            <li><a href="http://darryl-blog.example.org/" class="xfnRelationship" rel="friend met">Darryl</a></li>
            <li><a href="http://james-blog.example.com/" class="xfnRelationship" rel="met">James Expert</a></li>
          </ul>
          <h3>geo</h3>
          <p>Photo taken at <abbr title="-33.890937;151.281985" class="geo">North Bondi</abbr>.</p>
        </div>
        <!-- IE Column Clearing -->
        <div id="ie_clearing">&nbsp;</div>
      </div>
      <!-- end: #col3 -->
    </div>
    <!-- end: #main -->
    <!-- begin: #footer -->
    <div id="footer" role="contentinfo">Footer with copyright notice and status information<br />
      Layout based on <a href="http://www.yaml.de/">YAML</a></div>
    <!-- end: #footer -->
  </div>
</div>
<!-- full skiplink functionality in webkit browsers -->
<script src="../../yaml/core/js/yaml-focusfix.js" type="text/javascript"></script>
</body>
</html>
